import React, { useState, useEffect } from 'react'
import ReactDOM from 'react-dom'
// import './usePopup.less'

function Popup(props) {
  let dom = document.createElement('div')
  dom.classList.add('popupDom')

  useEffect(() => {
    if (props.isPopup) {
      document.body.appendChild(dom)
    } else {
      let popupDom = document.getElementsByClassName('popupDom')
      if (popupDom) {
        document.body.removeChild(popupDom)
      }
    }
  }, [props.isPopup])

  return () => {
    return ReactDOM.createPortal(props.children, dom)
  }
  // return ReactDOM.createPortal(props.children, dom)
}
export default Popup